<template>
<template>
	<textarea name="" id="editor"></textarea>
</template>
<script>
	const INIT = 0;
	const INPUT = 1;
	const CHANGED = 2;
	export default{
		data(){
			return{
				editorOpt:{
					selector: '#editor',
			        plugins: 'image code print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern help',

			        toolbar1: 'image code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright \
			         alignjustify | numlist bullist outdent indent  | removeformat',
			         images_upload_url: 'postAcceptor.php',
  
				  // we override default upload handler to simulate successful upload
				  images_upload_handler: function (blobInfo, success, failure) {
				    setTimeout(function() {
				      // no matter what you upload, we will turn it into TinyMCE logo :)
				      success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
				    }, 2000);
				  },
				  
				  // init_instance_callback: function (ed) {
				  //   ed.execCommand('mceImage');
				  // },
			        setup: (editor)=> {
			            // 初次化编辑器
			            editor.on('init', ()=>{
			                // 设置默认值
			                editor.setContent('<p>Default Valsue!</p>');
			                // 注册事件
			                editor.on('input change undo redo', ()=>{
			                	 // 只在用户输入导致事件相应时才更新value数据
                            	if(this.status === INPUT || this.status === INIT) return this.status = CHANGED;
			                    // 获得编辑结果
			                    
								var editBody = editor.getBody(); 
								editor.selection.select(editBody); 
								this.$emit('input',editor.selection.select(editBody).getContent( { 'format':'text' }));

			                });
			            });
			        }
				}
			}
		},
		value(val){
            // 只在外部引起变化时才跟新编辑器
            if(this.status === CHANGED || selt.status === INIT) return this.status = INPUT;
            tinymce.get(this.id).setContent(val);
        },
		created(){

		},
		mounted(){
			//初始化tinymce
			tinymce.init(this.editorOpt);
		}
	}
</script>